<template>
	<view class="app">
		<ReturnComponrnts></ReturnComponrnts>
		<view style='height:10%;'>&nbsp;</view>
		<view class="registerBox">
			<h2 class="title">
				欢迎注册
			</h2>
			<p>校园生活不将就，快递不用亲自走！</p>
			<view class="accountBox">
				<text>账号:</text>
				<input type="text" v-model="account"/>
			</view>
			<view class="accountBox">
				<text>密码:</text>
				<input type="text" v-model="password"/>
			</view>
			<view class="accountBox">
				<text>确认密码:</text>
				<input type="text" />
			</view>
			<view class="registerButton">
				<button @click="registerCheck">注册</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import ReturnComponrnts from '@/components/ReturnComponrnts.vue'
	import { userRegister } from '@/api/api'
	import { ref } from 'vue'
import { log } from 'console'

	const userName = ref('用户114514')
	const account = ref<string>('')
	const password = ref<string>('')
	// 账号验证  手机号格式
	const usernameRegex = /^(?:\+?86)?1[3-9]\d{9}$/;
	// 强密码验证 密码必须包含小写字母、大写字母、数字和特殊字符
	const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])[\w\W]{8,20}$/;


	//注册
	const registerCheck = async () => {
		console.log(account.value,password.value)
		if (usernameRegex.test(account.value) && strongPasswordRegex.test(password.value)) {
			console.log('123')
			const registerCode = await userRegister({
				userName: userName.value,
				account: account.value,
				password: password.value,
			})
		}else{
			console.error('账号或密码格式错误')
		}

	}
</script>

<style scoped lang="scss">
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.app {
		background: linear-gradient(to bottom right, #d0f5e7, #ffffff);
		width: 100vw;
		height: 100vh;
		padding: 20rpx 30rpx;

		.registerBox {
			margin: 0 auto;
			width: 100%;
			max-width: 500px;
			padding: 20rpx;
			background-color: #ffffff;
			border-radius: 30rpx;
			box-shadow: 3px 3px 10px #333;

			.title {
				width: 100%;
				font-size: 60rpx
			}

			p {
				color: #666;
				margin-bottom: 50rpx;
			}

			view {
				width: 100%;
				height: 90rpx;
				background-color: red;
				display: flex;
				margin: 30rpx 0;
				background-color: #f1f1f1;
				border-radius: 20rpx;

				text {
					flex: 2;
					font-size: 25rpx;
					text-align: center;
					height: 100%;
					line-height: 90rpx;
				}

				input {
					flex: 8;
					height: 100%;
				}

				button {
					width: 100%;
					border: none;
					background-color: #d0f5e7;
				}
			}
		}
	}
</style>